<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客系统 - 首页</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 简单配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
<!-- 导航栏 -->
<header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-book text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-gray-800">博客系统</h1>
        </div>

        <nav class="hidden md:flex items-center space-x-6">
            <a href="#" class="text-primary font-medium">首页</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors">发现</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于</a>
        </nav>

        <div class="flex items-center space-x-3">
            <a href="${pageContext.request.contextPath}/user/loginPage" class="px-3 py-2 text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-sign-in mr-1"></i>登录
            </a>
            <a href="${pageContext.request.contextPath}/user/registerPage" class="px-3 py-2 bg-primary text-white rounded hover:bg-primary/90 transition-colors">
                <i class="fa fa-user-plus mr-1"></i>注册
            </a>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-8">
    <!-- 系统简介 -->
    <section class="mb-12 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">分享你的想法与故事</h2>
        <p class="text-gray-600 max-w-2xl mx-auto mb-8">
            这是一个简单的博客系统，在这里你可以记录生活点滴，分享知识见解，与志同道合的人交流思想。
        </p>
        <a href="${pageContext.request.contextPath}/user/registerPage" class="inline-block px-6 py-3 bg-primary text-white rounded-lg shadow hover:shadow-md hover:bg-primary/90 transition-all">
            立即加入 <i class="fa fa-arrow-right ml-1"></i>
        </a>
    </section>

    <!-- 最新博客 -->
    <section class="mb-12">
        <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
            <i class="fa fa-fire text-orange-500 mr-2"></i> 最新博客
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 博客卡片1 -->
            <article class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                <div class="p-5">
                    <h4 class="text-lg font-semibold text-gray-800 mb-2 hover:text-primary transition-colors">
                        <a href="#">如何开始学习Java编程</a>
                    </h4>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                        Java是一种广泛使用的编程语言，本文将介绍初学者如何入门Java编程，包括必备的学习资源和实践方法...
                    </p>
                    <div class="flex justify-between items-center text-xs text-gray-500">
                        <span><i class="fa fa-user mr-1"></i> 张小明</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2023-06-15</span>
                    </div>
                </div>
            </article>

            <!-- 博客卡片2 -->
            <article class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                <div class="p-5">
                    <h4 class="text-lg font-semibold text-gray-800 mb-2 hover:text-primary transition-colors">
                        <a href="#">Spring Boot框架入门教程</a>
                    </h4>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                        Spring Boot简化了Spring应用的初始搭建和开发过程，本文将带你快速了解Spring Boot的核心功能和使用方法...
                    </p>
                    <div class="flex justify-between items-center text-xs text-gray-500">
                        <span><i class="fa fa-user mr-1"></i> 李华</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2023-06-10</span>
                    </div>
                </div>
            </article>

            <!-- 博客卡片3 -->
            <article class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                <div class="p-5">
                    <h4 class="text-lg font-semibold text-gray-800 mb-2 hover:text-primary transition-colors">
                        <a href="#">数据库优化的几个实用技巧</a>
                    </h4>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                        随着数据量增长，数据库性能可能成为系统瓶颈。本文分享几个实用的数据库优化技巧，帮助提升系统响应速度...
                    </p>
                    <div class="flex justify-between items-center text-xs text-gray-500">
                        <span><i class="fa fa-user mr-1"></i> 王强</span>
                        <span><i class="fa fa-calendar mr-1"></i> 2023-06-05</span>
                    </div>
                </div>
            </article>
        </div>

        <div class="mt-6 text-center">
            <a href="#" class="text-primary hover:underline inline-flex items-center">
                查看更多 <i class="fa fa-angle-double-right ml-1"></i>
            </a>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4">
        <div class="text-center">
            <div class="flex justify-center items-center space-x-2 mb-4">
                <i class="fa fa-book text-primary text-xl"></i>
                <h2 class="text-lg font-bold">博客系统</h2>
            </div>
            <p class="text-gray-400 text-sm mb-4">
                简单、高效的个人博客平台
            </p>
            <div class="text-gray-500 text-xs">
                &copy; 2023 博客系统 版权所有
            </div>
        </div>
    </div>
</footer>
</body>
</html>
